<template>
  <div class="row-item">
    <div class="title">{{ label }}</div>
    <el-input
      type="textarea"
      :rows="6"
      :placeholder="placeholder"
      v-model="inputValue"
      @input="handleInput"
      style="width: 100%; font-family: monospace;"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
  label: String,
  value: String,
  identifier: String,
  pidentifier: String,
  required: Boolean,
  placeholder: {
    type: String,
    default: '请输入自定义CSS样式，如：color: red; font-size: 16px;'
  }
})
const emit = defineEmits(['onchange'])
const inputValue = ref(props.value ?? '')

watch(() => props.value, val => inputValue.value = val ?? '')

function handleInput(val: string | undefined) {
  emit('onchange', {
    pidentifier: props.pidentifier,
    identifier: props.identifier,
    value: val ?? ''
  })
}
</script>

<style scoped>
.row-item {
  margin-bottom: 8px;
}
.title {
  font-size: 13px;
  color: #8a99b3;
  margin-bottom: 4px;
}
</style> 